<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页</title>
	<link href='http://fonts.useso.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="img/normalize.css">
	<style>
          body {
        background-image: url(img/bg5.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
      }
     .container{
      	background:url(img/banner.jpg) ;
       width:960px;
      height: 190px;
       margin: 90px auto;
      
      }
  .container  img{
     	margin-left:415px;
   	margin-top: -70px ;
   	box-shadow: 0 0px 2px 1px rgba(0,0,0,0.2);
   	border-radius: 999px;
       border: 3px solid green;
       margin-bottom: 10px;
       padding: 1px;
     }
   .container  span{

     	position:absolute;
      margin-left:350px;
      margin-top: -10px;
      	font-weight: 300;
 font-size: 50px;
 font-family: 'Open Sans','helvetica',arial,sans-serif;
  text-shadow: 0 1px rgba(0,0,0,0.3);
 color:white;
     }
  body {
  font-family: 'Open Sans','helvetica',arial,sans-serif;
  font-weight: 300;
  color: #62686f;
}

h1, h2, h3, h4, h5, h6 {
  color: #333;
  font-weight: 300;
}
.main-nav {
   width:960px;
   
 margin : -90px auto;
  text-align: center;
  
  background-color: #333;
}
.main-nav ul li {
  margin: 15px 10px;
  display: inline-block;

}
ul{
 
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-nav ul li a{
 color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
}
.main-nav ul li a:hover {
  text-decoration: underline;
}
.info-section header {
  display: inline;
  margin-top: 200px;
  border: 1px solid red;
  margin-top:70px;
  text-align: center;
}
.info-section header h1 {
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.info-section header h1{
 border: ;

}
.info-section__description {
  font-style: italic;
}
.info-section {
  background-color: #fff;
  margin-top: 90px;
  width: 960px;
  margin:90px auto;
}

.whatido__skill--code{
  width: 33.3%;
  text-align: center;
  padding-top: 100px;
  background-image: url(./img/skill-code.png);
   background-repeat: no-repeat;
   background-position: center top;
}

.whatido__skill--design {
  width: 33.3%;
  text-align: center;
    padding-top: 100px;
  background-image: url(./img/skill-design.png);
  background-repeat: no-repeat;
   background-position: center top;
}

.whatido__skill--product {
  width:33.4%;
  text-align: center;
    padding-top: 100px;
  background-image: url(./img/skill-product.png);
  background-repeat: no-repeat;
   background-position: center top;
}
section ul {
    overflow: hidden;
}

section ul li{
  margin-top: 30px;
  float: left;
}
section ul li h3{
  text-transform: uppercase;
}
.intro,.intro1{
 
    background-color: #fff;
    width: 960px;
     margin: -90px auto;
     padding: 1px;

}

 .intro header h1{
    margin-top: 90px;
   text-align: center;
  
  font-size: 28px;
  letter-spacing: 3px;
  

 }
}
 .intro header img{
  float: left;
 }
 .intro header span {
  display: block;
 margin-top: -250px;
 margin-left: 320px;
      
 }
 .intro header span h3{
font-weight: bold;
margin-top: -20px;
 }
 .intro1 header img{

  float: left;
 margin-top: 0px;
  margin-left: 50px;
 }
 .intro1 header span{
display: block;
margin-top: 100px;
  margin-left: 320px;
 }
 .intro1 {
  background: white;
  width: 960px;
  padding: 1px;
  margin-top: 90px;
 }
.intro1 header h3{
  font-weight: bold;
margin-top: -20px;
}
.intro2 {
  background: white;
  width: 960px;
  padding: 1px;
  margin: 90px auto; 
}
.intro2 img {
  float: left;
  
}
.intro2 header  span{
display: block;
margin-top: 100px;
  margin-left: 320px;
}
.intro2 header  h3{
  font-weight: bold;
margin-top: -20px;
}
#pho {
 
  background: #fff;
  margin: -90px auto;
  width: 960px;
  padding: 1px;

}
#pho h1{
  letter-spacing: 3px;
  text-transform: uppercase;
   margin-top: 200px; 
  text-align: center;
}
#pho h3{
  text-align: center;
}
article{
  background: #fff;
  width: 960px;
  margin: 90px auto;
box-sizing: border-box;

 
}
article a{
  
    box-sizing: inherit;
    padding: 5px;
}
.com{
  margin: -90px auto;
  width: 960px;
  background: #fff;
  padding: 1px;
  box-sizing:border-box;
}
.com h1{
  margin-top: 90px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.com span {
  margin-top: 80px;
overflow: hidden;
  margin-left: 50px;
   box-sizing: inherit;
   float:left;
}
.com span a{

  width: 25%;
 
  padding: 25px;
   margin:0 auto;
}
.com h4{
  width: 8%;
  display: inline-block;
  margin-left: 130px;
}
#form{
  background: #fff;
  margin:90px auto;
  padding: 1px;
  width: 960px;
}
#form h1{
  text-align: center;
  margin-top: 120px;
  letter-spacing: 3px;
}
.form input,textarea{
  width: 40%;
   border: 1px solid #ccc;
  border-radius: 4px;
}
.form #submit{
    border: none;
  border-radius: 9999px;
  background:orange ;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  color: #fff;
  box-shadow: 0 3px 0 #daae1d;
}
.form #submit:hover{
  background: #ffd524;
}
.form{
  position: relative;
 text-align: center;
  background: #fff;
  margin:-90px auto;
  padding: 1px;
  width: 960px;
}
.form input,textarea{
  width: 34%;
  margin-bottom:10px;
   padding: 8px;
}
.form .h4{
  position: absolute;
  width: 100%;
  left:   -22%;
  top:-8%; 
}
.form .h3{
  position: absolute;
   width: 100%;
   top: 12%;
   left: -22%;
}
.form .h2{
   position: absolute;
   width: 100%;
   left: -22%;
   top: 40%
}
footer h1{
  margin:200px auto;
  
  width: 960px;
  text-align: center;
}
	</style>
}

</head>
<body>
	<div class="container">
  
  <img src="img/teng.jpg" alt="te">
 <h1><span>DAJIAHAOA</span></h1>
  </div>
  <nav class="main-nav"> 
      <ul>
        <li> <a href="#">Work</a></li>
        <li>  <a href="#">Experience</a> </li>
        <li> <a href="#"> Photos</a> </li>
         <li><a href="#">Contact</a>  </li>
      </ul>
    </nav>

<section class="info-section whatido">
  <header>
    <h1>What I Do</h1>
    <p class="info-section__description">I'm Teng. I design and develop things on the web. Oh, and I like curry.</p>
  </header>
  <ul class="whatido__skill-list">
    <li class="whatido__skill--code">
      <h3>Code</h3>
      <p>I like building things on the web. I've built games, tools, and web apps.</p>
    </li>
    <li class="whatido__skill--design">
      <h3>Design / UX</h3>
      <p>I like creating happiness by making things look good and work well.</p>
    </li>
    <li class="whatido__skill--product">
      <h3>Product</h3>
      <p>I like taking products from idea to reality to users and beyond!</p>
    </li>
  </ul>
</section>


<section class="intro"><header>
    <h1>EDUCATION & EXPERIENCE</h1>
    <img src="img/strikingly-logo.png" alt="1">
    <span>
  <h2>Strikingly</h2>
  <h3>Cofounder, 2012 - Present</h3>
   Strikingly is a website builder that's simple, beautiful, and fun. Andperfect for the age of mobile. I'm in charge of UI/UX and front-end.
   <h4>Y Combinator Winter '13</h4></span>
    </header>
</section>
<section class="intro1">
  <header>
    <img src="img/echo-rocket.jpg" alt="2">
    <span>
      <h2>Freelance Web/Game Developer</h2>
        <h3>2007 - 2012</h3>
          EchoRocket was my one-man Flash game studio and web development/design consultancy. I built Spinblaster, Block Knocker, CampusAmp, HireBrite, and more!
    </span>
  </header>
</section>
<section class="intro2"><header>
<img src="img/u-of-chicago.jpg" alt="3">
<span>
  <h2>University of Chicago</h2>
  <h3>
    BA Economics, 2008-2012
  </h3>
  Studying the finer points of firms, markets, finance, decision theory, and supply and demand.
  <h4>Activities: Chicago Careers in Business, Student Government, Phi Beta Kappa</h4>
</span>
</header>
</section>
<div id="pho">
   <h1>photos</h1> 
     <h3>Some pics from my travels!</h3>  </div>
      <article>
        <a href="#"><img src="img/p01.jpg" alt="1"></a>
         <a href="#"><img src="img/p02.jpg" alt="2"></a>
          <a href="#"><img src="img/p03.jpg" alt="3"></a>
           <a href="#"><img src="img/p04.jpg" alt="4"></a>
            <a href="#"><img src="img/p05.jpg" alt="5"></a>
             <a href="#"><img src="img/p06.jpg" alt="6"></a>
              <a href="#"><img src="img/p07.jpg" alt="7"></a>
               <a href="#"><img src="img/p08.jpg" alt="8"></a>
      </article>
    <aside class="com">
        <h1>GET IN TOUCH</h1><span>
         <a href="#"><img src="img/fb-icon.png" alt=""></a>
        
         <a href="#"><img src="img/twitter-icon.png" alt=""></a>
         
         <a href="#"><img src="img/linkedin-icon.png" alt=""></a>
        
          <a href="#"><img src="img/email-icon.png" alt=""></a>
          </span>
<h4> Facebook</h4>
          <h4>Twitter</h4>
          <h4> LinkedIn</h4>
         <h4> teng@strikingly.com</h4>
    </aside>
    <form action="get" id="form">
      <h1>OR... LEAVE A MESSAGE</h1>
    </form>
    <form action="post"class="form">
      
      <h4 class="h4">Name</h4><input type="text" name="username"><br>
       <h4 class="h3">Email</h4><input type="text" name="Email"><br>
       <h4 class="h2">message</h4><textarea name="message" id="" cols="15" rows="5"></textarea><br>
      <input type="submit" id="submit" value="submit">
      <br><br><br>
    </form><br>

    <footer>
    <h1>© 2013 Teng Bao</h1></footer>
 
<script>
	

// 	 


 //img{
//          position: absolute;
//       	box-shadow: 0 0px 2px 1px rgba(0,0,0,0.2);
//       	border-radius: 999px;
//       margin-top: -70px;
//         margin-left:415px;
//       	display: block;
//        border: 3px solid white;
//       }
//    h1{
//    	font-weight: 300;
// font-size: 50px;
// font-family: 'Open Sans','helvetica',arial,sans-serif;
// text-shadow: 0 1px rgba(0,0,0,0.3);
// color:white;
// margin-left: 350px;
// margin-top: 100px;
// position: absolute;


//    }
     
</script>
</body>
</html>